window.addEventListener('load',function(){
//     ① 整个案例可以分为三个功能模块
//     ② 鼠标经过小图片盒子， 黄色的遮挡层 和 大图片盒子显示，离开隐藏2个盒子功能
//     ③ 黄色的遮挡层跟随鼠标功能。
//     ④ 移动黄色遮挡层，大图片跟随移动功能。
    var preview_img = document.querySelector('.preview-img');
    var mask = document.querySelector('.mask');
    var big = document.querySelector('.big');
    var bigImg = document.querySelector('.bigImg');
    // 1. 当我们鼠标经过preview_img 就显示和隐藏 mask遮挡层 和 big大盒子
    preview_img.addEventListener('mouseover',function(){
        mask.style.display = 'block';
        big.style.display = 'block';
    })
    preview_img.addEventListener('mouseout',function(){
        mask.style.display = 'none';
        big.style.display = 'none';
    })
    // ① 黄色的遮挡层跟随鼠标功能。
    // ② 把鼠标坐标给遮挡层不合适。因为遮挡层坐标以父盒子为准。
    // ③ 首先是获得鼠标在盒子的坐标。
    // ④ 之后把数值给遮挡层做为left 和top值。
    // ⑤ 此时用到鼠标移动事件，但是还是在小图片盒子内移动。
    // ⑥ 发现，遮挡层位置不对，需要再减去盒子自身高度和宽度的一半。
    // ⑦ 遮挡层不能超出小图片盒子范围。
    // ⑧ 如果小于零，就把坐标设置为0
    // ⑨ 如果大于遮挡层最大的移动距离，就把坐标设置为最大的移动距离
    // ⑩ 遮挡层的最大移动距离： 小图片盒子宽度 减去 遮挡层盒子宽度
    // 2. 鼠标移动的时候，让黄色的盒子跟着鼠标来走
    preview_img.addEventListener('mousemove',function(e){
        //(1).先计算出鼠标在盒子内的坐标
        var x = e.pageX - this.offsetLeft;
        var y = e.pageY - this.offsetTop;
        // console.log(x,y);
        // (2) 减去盒子高度 300的一半 是 150 就是我们mask 的最终 left 和top值了
        // (3) 我们mask 移动的距离
        var maskX = x - mask.offsetWidth / 2 ;
        var maskY = y - mask.offsetHeight / 2 ;
        // 遮挡层的最大移动距离
        var maskMax = preview_img.offsetWidth - mask.offsetWidth;
        if(maskX <= 0){
            maskX = 0;
        }else if(maskX > maskMax ){
            maskX = maskMax ;
        }
        if(maskY <= 0){
            maskY = 0;
        }else if(maskY > maskMax ){
            maskY = maskMax ;
        }
        mask.style.left = maskX + 'px';
        mask.style.top = maskY + 'px';
        //① 移动黄色遮挡层，大图片跟随移动功能。
        //② 求大图片的移动距离公式
        // 大图片移动距离 = 遮挡层移动距离*大图片最大移动距离 / 遮挡层最大移动距离
        // 大图片最大移动距离 = 大图片的宽度 - 大盒子的宽度
        var bigMax = bigImg.offsetWidth - big.offsetWidth;
        var bigX = maskX * bigMax / maskMax;
        var bigY = maskY * bigMax / maskMax;
        bigImg.style.left = - bigX + 'px';
        bigImg.style.top = - bigY + 'px';
    })
})